import pageStyles from '@/common/pageLayout.less';
import { Button, Col, Form, Input, message, Radio, Row, Select } from 'antd';
import { useCallback, useContext, useState } from 'react';
import { useRequest } from 'umi';
import { loadMdicMap } from '@/services/BaseLayout';
import { getTenantID } from '@/utils';
import { AnnounceManageAPI } from '../common/type';
import { AnnounceDetailContext } from '../common/UpdateContext';
import { checkIssueService } from '../service';

export const HandleCheckForm: React.FC<AnnounceManageAPI.IHandleCheckForm> = ({}) => {
  const { reloadAnnounceInfo, announceInfo } = useContext(AnnounceDetailContext);
  /**
   * 表单 form
   */
  const [checkForm] = Form.useForm();

  /**
   * 是否显示作废类型
   */
  const [showCancelType, setShowCancelType] = useState<boolean>(false);

  /**
   * 审核单选框默认值
   */
  const [radioDefault, setRadioDefault] = useState<any>(1);
  const radioChangeCallback = useCallback(
    (radioKey: any) => {
      setRadioDefault(radioKey);
    },
    [radioDefault],
  );

  /**
   * 接口回调
   * @param res
   */
  const checkIssueCallllback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      reloadAnnounceInfo();
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入接口
   */
  const { checkIssueLoading, checkIssueRun } = checkIssueService(checkIssueCallllback);

  /**
   * 提交审核结果
   */
  const submitCheck = () => {
    checkForm?.validateFields()?.then((values: any) => {
      let checkObj: any = announceInfo?.checkList?.filter((itemCheck: any) => {
        return itemCheck?.checkState == 0;
      });
      let checkPayload: any = {
        ...values,
        id: checkObj?.[0]?.id,
        versionNum: checkObj?.[0]?.versionNum,
      };
      checkIssueRun(checkPayload);
    });
  };

  /**
   * 获取数据字典loadMdicMap
   */
  const loadMdicMapList = useRequest(
    () => {
      return loadMdicMap([`${getTenantID()}1203`]);
    },
    { manual: true },
  );

  /**
   * 是否展示作废类型
   */
  const cancelTypeList = () => {
    loadMdicMapList?.run();
    setShowCancelType(true);
  };

  return (
    <>
      <div className={pageStyles['fromView-styles']}>
        <Form labelAlign="right" form={checkForm}>
          <Row>
            <Col span={12}>
              <Form.Item
                name="checkState"
                label="审核结果"
                rules={[
                  {
                    required: true,
                    message: '请选择审核结果',
                  },
                ]}
                initialValue={radioDefault}
              >
                <Radio.Group
                  onChange={(e) => {
                    let text: string = '';
                    if (e?.target?.value == 1) {
                      text = '审核通过';
                      setShowCancelType(false);
                    } else if (e?.target?.value == 2) {
                      text = '审核退回';
                      setShowCancelType(false);
                    } else if (e?.target?.value == 3) {
                      text = '作废';
                      cancelTypeList();
                    }
                    checkForm?.setFieldsValue({
                      checkResult: text,
                    });
                    radioChangeCallback(e?.target?.value);
                  }}
                >
                  <Radio value={1}>审核通过</Radio>
                  <Radio value={2}>审核退回</Radio>
                  <Radio value={3}>作废</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            {showCancelType && (
              <Col span={12}>
                <Form.Item
                  name="cancelType"
                  label="作废类型"
                  rules={[
                    {
                      required: true,
                      message: '请选择作废类型',
                    },
                  ]}
                >
                  <Select placeholder="请选择作废类型" allowClear loading={loadMdicMapList?.loading}>
                    {loadMdicMapList?.data?.obj?.[`${getTenantID()}1203`]?.map((item: any) => {
                      return (
                        <Select.Option key={item?.id} value={item?.id}>
                          {item?.name}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
            )}

            <Col span={24}>
              <Form.Item name="checkResult" label="审核意见" initialValue={'审核通过'}>
                <Input.TextArea placeholder={`请输入审核意见`} showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
              </Form.Item>
            </Col>
            <Col span={24} style={{ textAlign: 'center', paddingBottom: 10 }}>
              <Button type="primary" onClick={submitCheck} loading={checkIssueLoading}>
                提交
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
    </>
  );
};
